import React from 'react'
import ReactDOM from 'react-dom'

export default function Efhkzj() {

  let [count, setCount] = React.useState(0)

  //React.useEffect 此方法可在函数式组件内使用生命周期  
  //两个参数 第一个参数为函数  如果return 一个函数 则相当于 componentWillUnmount---组件将要卸载

  //第二个参数不传监测所有 相当于 componentDidMount---组件挂载完毕  
  //第二个参数如果传[]所有的都不监测  如果传[name]只监测name  相当于  componentDidUpdate---组件更新之后
  React.useEffect(() => {
    let timer = setInterval(() => {
      setCount(count => count + 1)
    }, 1000)

    //相当于 componentWillUnmount---组件将要卸载
    return () => {
      clearInterval(timer)
    }
  }, [])

  function add() {
    // setCount(count+1) 第一种写法
    setCount(count => count + 1)
  }

  function unmount() {
    // 组件卸载
    ReactDOM.unmountComponentAtNode(document.getElementById('root'))
  }

  return (
    <div>
      <div>当前值为：{count}</div>
      <button onClick={add}>点击+1</button>
      <button onClick={unmount}>卸载组件</button>
    </div>
  )
}
